<template>
	<div class="footer">
		<el-pagination 
			@current-change="page_change" 
			@size-change="size_change"
			background layout="prev, pager, next, sizes, jumper"
			:page-size="pageSize" :page-sizes="pageSizes"
			:total="total">
		</el-pagination>
	</div>
</template>

<script>
export default {
	name: 'PaginationFooter',
	props: {
		pageSize: Number,
		pageSizes: Array,
		total: Number,
	},
	methods: {
		page_change(page){
			this.$emit('current-change' ,page)
		},
		size_change(size){
			this.$emit('size-change', size)
		}
	}
}
</script>

<style>
.footer{
  position: fixed; bottom: 0;
  width: 100%; height: 40px;
  padding-top: 10px;
  background: white;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, .1), 0 0 6px rgba(0, 0, 0, .1);
  display: flex; justify-content: center; align-content: center;
}
</style>